<template>
  <div class="demo">
    <div class="demo-title">面板嵌套</div>
    <div class="demo-content">
      <Collapse v-model:activeKey="activeKey" @change="changeActivekey">
        <Collapse.Panel key="1" header="This is panel header 1">
          <Collapse default-active-key="4">
            <Collapse.Panel key="4" header="This is panel nest panel">
              <p>{{ text }}</p>
            </Collapse.Panel>
          </Collapse>
        </Collapse.Panel>
        <Collapse.Panel key="2" header="This is panel header 2">
          <p>{{ text }}</p>
        </Collapse.Panel>
        <Collapse.Panel key="3" header="This is panel header 3">
          <p>{{ text }}</p>
        </Collapse.Panel>
      </Collapse>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import Collapse from '@sscd/collapse';
  const activeKey = ref([]);
  const text = `A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.`;
  const changeActivekey = (key: string) => console.log(key);
</script>
